const path = require('path');
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

// 路径
const resolve = (dir) => path.join(__dirname, dir);
const vars = (dir) => path.resolve(__dirname, dir);

module.exports = {
    publicPath: './', //应用时的基本URL
    outputDir: path.resolve(__dirname, './dist'), // 输出文件目录
    assetsDir: 'static', //放置静态资源
    lintOnSave: true, // 开发环境下每次保存代码都启用eslint验证
    productionSourceMap: false, // 是否打包.map
    devServer: {
        port: 8800, // 本地端口
        // 请求代理
        proxy: {
            '/': {
                target: process.env.VUE_APP_HOST, // 代理地址
                changeOrigin: true, // 允许跨域
                pathRewrite: { '^/': '' } // 重写路径
            }
        },
        disableHostCheck: true // 是否关闭DNS重绑定的HTTP请求HOST检查
        // open: true // 自动启动浏览器
    },
    // 对内部的 webpack 配置（比如修改、增加Loader选项）(链式操作)
    chainWebpack: (config) => {
        config.resolve.symlinks(true); //修复热更新失效
        config.resolve.alias.set('@', resolve('src')).set('request', resolve('src/global/request')); // 别名配置
    },
    configureWebpack: {
        // 插件配置
        plugins: [
            // 按需加载element-plus
            AutoImport({ resolvers: [ElementPlusResolver()] }),
            Components({ resolvers: [ElementPlusResolver()] })
        ]
    },
    // css处理
    css: {
        requireModuleExtension: true,
        // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时，你也可以将其设置为 false 免得用户自己导入 CSS
        extract: false,
        // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能
        sourceMap: false,
        // 向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader)
        loaderOptions: {
            css: {},
            less: {
                javascriptEnabled: true,
                modifyVars: {
                    animate: `true; @import "${vars('src/assets/less/animate.less')}"`,
                    hack: `true; @import "${vars('src/assets/less/index.less')}"`,
                    background: `true; @import "${vars('src/assets/less/background.less')}"`,
                    header: `true; @import "${vars('src/assets/less/header.less')}"`,
                    emojis: `true; @import "${vars('src/assets/less/emojis.less')}"`
                }
            }
        }
    }
};
